<!-- 微页面分类 -->
<template>
	<block>
		<view class="menu-tabs-content fixedSelect" :class="{ 'tabs-fixed': fixed }" :style="{borderRadius:fixed==true? '0':'30'+'rpx'}">
			<scroll-view :scroll-left="scrollLeft" :id="viewIds" scroll-x scroll-with-animation
				:scroll-animation-duration="300">
				<view class="tabs-item-content tabs-flex-content" :class="{ 'pdts': fixed }">
					<view class="tab-item-content"
						:style="{ width: tabWidthVal, height: tabHeightVal, 'line-height': tabHeightVal, color: value == i ? ativerText : textColor,fontWeight:value == i ?fontWeightStyle:'',fontSize:value == i ?fontTextSizeActive+'rpx':fontTextSize+'rpx',}"
						v-for="(tab, i) in tabList" :key="i" @click="tabClick(i,tab)" >
						{{ getTabName(tab) }}
					</view>
					<!-- 下划线 -->
					<view class="tabs-line-content" :style="{ left: lineLeft, background: lineColor }"></view>
				</view>
			</scroll-view>
		</view>
	</block>
</template>

<script>
	export default {
		name: 'classified',
		data() {
			return {
				viewIds: 'id_' +
					Math.random()
					.toString(36)
					.substr(2, 16),
				scrollLeft: 0
			};
		},
		props: {
			tabList: {
				type: Array,
				default () {
					return [];
				}
			},
			nameKey: {
				// 取name的字段
				type: String,
				default: 'name'
			},
			value: {
				// 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
				type: [String, Number],
				default: 0
			},
			// 是否悬浮,默认false
			fixed: {
				type: Boolean,
				default: false
			},
			tabWidth: Number, // 每个tab的宽度,默认不设置值,为flex平均分配; 如果指定宽度,则不使用flex,每个tab居左,超过则水平滑动(单位默认rpx)
			height: {
				// 高度,单位rpx
				type: Number,
				default: 78
			},
			// 文字颜色
			textColor: {
				type: String,
				default: '#797979'
			},
			// 底部线条颜色
			lineColor: {
				type: String,
				default: 'red'
			},
			// 高亮字体颜色
			ativerText: {
				type: String,
				default: '#222222'
			},
			// 背景颜色
			backColor: {
				type: String,
				default: '#ffffff'
			},
			// 字体大小
			fontTextSize: {
				type: Number,
				default: 30
			},
			// 字体加粗
			fontWeightStyle: {
				type: Number,
				default: 600
			},
			// 选中加粗
			fontTextSizeActive: {
				type: Number,
				default: 30
			}
		},
		onShow() {
		},
		computed: {
			isScroll() {
				return this.tabWidth && this.tabList.length; // 指定了tabWidth的宽度,则支持水平滑动
			},
			tabHeightPx() {
				return uni.upx2px(this.height);
			},
			tabHeightVal() {
				return this.tabHeightPx + 'px';
			},
			tabWidthPx() {
				return uni.upx2px(this.tabWidth);
			},
			tabWidthVal() {
				return this.isScroll ? this.tabWidthPx + 'px' : '';
			},
			lineLeft() {
				if (this.isScroll) {
					// return this.tabWidthPx * this.value + this.tabWidthPx / 2 + 'px'; // 需转为px (用rpx的话iOS真机显示有误差)
					return (100 / this.tabList.length) * (this.value + 1) - 100 / (this.tabList.length * 2) + '%';
				} else {
					return (100 / this.tabList.length) * (this.value + 1) - 100 / (this.tabList.length * 2) + '%';
				}
			},
		},
		watch: {
			tabs() {
				this.warpWidth = null; // 重新计算容器宽度
				this.scrollCenter(); // 水平滚动到中间
			},
			value() {
				this.scrollCenter(); // 水平滚动到中间
			}
		},
		methods: {
			getTabName(tab) {
				return typeof tab === 'object' ? tab[this.nameKey] : tab;
			},
			tabClick(i,tab) {
				if (this.value != i) {
					this.$emit('input', i);
					this.$emit('change', i,tab);
				}
			},
			async scrollCenter() {
				if (!this.isScroll) return;
				if (!this.warpWidth) {
					// tabs容器的宽度
					let rect = await this.initWarpRect();
					this.warpWidth = rect ? rect.width : uni.getSystemInfoSync().windowWidth; // 某些情况下取不到宽度,暂时取屏幕宽度
				}
				let tabLeft = this.tabWidthPx * this.value + this.tabWidthPx / 2; // 当前tab中心点到左边的距离
				let diff = tabLeft - this.warpWidth / 2; // 如果超过tabs容器的一半,则滚动差值
				this.scrollLeft = diff;
				// #ifdef MP-TOUTIAO
				this.scrollTimer && clearTimeout(this.scrollTimer);
				this.scrollTimer = setTimeout(() => {
					// 字节跳动小程序,需延时再次设置scrollLeft,否则tab切换跨度较大时不生效
					this.scrollLeft = Math.ceil(diff);
				}, 400);
				// #endif
			},
			initWarpRect() {
				return new Promise(resolve => {
					setTimeout(() => {
						// 延时确保dom已渲染, 不使用$nextclick
						let query = uni.createSelectorQuery();
						// #ifndef MP-ALIPAY
						query = query.in(this); // 支付宝小程序不支持in(this),而字节跳动小程序必须写in(this), 否则都取不到值
						// #endif
						query
							.select('#' + this.viewIds)
							.boundingClientRect(data => {
								resolve(data);
							})
							.exec();
					}, 20);
				});
			}
		},
		mounted() {
			this.scrollCenter(); // 滚动到当前下标
		}
	};
</script>

<style lang="scss">
	.menu-tabs-content {
		position: relative;
		font-size: 32rpx;
		font-family: Adobe Heiti Std;
		box-sizing: border-box;
		overflow-y: hidden;
		width: 751rpx;
		height: 78rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin: 30rpx auto 30rpx auto;
		padding-left: 20rpx;
		padding-right: 20rpx;
		.tabs-item-content {
			position: relative;
			white-space: nowrap;
			padding-bottom: 30rpx; // 撑开高度,再配合menu-tabs的overflow-y: hidden,以达到隐藏滚动条的目的
			box-sizing: border-box;

			.tab-item-content {
				position: relative;
				text-align: center;
				box-sizing: border-box;
				z-index: 9;

				&.active {
					font-weight: bold;
					color: red;
				}
			}
		}

		// 平分的方式显示item
		.tabs-flex-content {
			display: flex;
			.tab-item-content {
				flex: 1;
			}
		}

		// 居左显示item,支持水平滑动
		.tabs-scroll-content {
			.tab-item-content {
				display: inline-block;
			}
		}

		// 选中tab的线
		.tabs-line-content {
			z-index: 1;
			position: absolute;
			bottom: 50rpx; // 至少与.tabs-item的padding-bottom一致,才能保证在底部边缘
			width: 73rpx;
			height: 8rpx;
			transform: translateX(-50%);
			border-radius: 4rpx;
			transition: left 0.3s;
		}
	}

	.widths-content {
		width: 600px;
	}

	/* #ifdef H5 */
	.tabs-fixed{
		position: fixed;
		top: 61rpx;
		width: 100%;
		z-index: 99999;
	}
	/*#endif*/
	
	/* #ifdef MP-WEIXIN */
	.tabs-fixed{
		position: fixed;
		top: 11.06%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 100%;
		height: 95rpx;
		z-index: 99999;
		margin: 0 auto!important;
	}
	/*#endif*/
	
	/* #ifdef MP-WEIXIN */
	.pdts {
		padding-top: 20rpx;
	}
	/*#endif*/
	
</style>
